<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<select name="" id="draw">
  <option value="1">蓬莱菊花</option>
  <option value="2">令箭荷花</option>
</select>
<canvas width="200" height="200" id="canvas"></canvas>
<input type="button" id="btn" value="绘制">

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var btn = document.getElementById('btn');
  var A;

  btn.onclick = btn_click;

  function btn_click() {
    var w = canvas.width;
    var h = canvas.height;
    var X0 = w / 2;
    var Y0 = h /2;
    var k = parseInt(document.getElementById('draw').value); // 默认为 1
    // console.log(k);

    if (k === 2) {
      A = Y0 * 0.25;
    } else {
      A = Y0 * 0.75;
    }

    ctx.save(); // 保存当前绘制的状态
    ctx.clearRect(0, 0, w, h); // 清除之前绘制的图形
    ctx.translate(X0, Y0); // 将坐标原点移到 canvas 中间
    ctx.beginPath(); // 开始绘制

    for (var B = 0; B <= 6.28; B = B + 0.01) {
      draw(B);
    }

    ctx.closePath();
    ctx.restore(); // 恢复到保存前的状态
  }

  function draw(B) {
    var n = 10;
    var r, x, y;

    switch(parseInt(document.getElementById('draw').value)) {
      case 1:
        r = A * Math.sin(n * B);
      case 2:
        r = A * (Math.sin(n * B) + 3 * Math.sin(3 * n * B));
    }

    x = r * Math.cos(B);
    y = r * Math.sin(B);

    ctx.fillStyle = 'green';
    ctx.strokeStyle = 'black';
    ctx.lineTo(-x, -y);
    ctx.fill();
    ctx.stroke();
  }
</script>
</body>
</html>
